<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap.stop="onBack"></image>
				<div class="card-list">
					<div class="card-item" v-for="item in cardList">
						<div class="left"></div>
						<div class="right"></div>
						<div class="card-top">
							<div class="column">
								<span class="jiu-font32-fff">{{item.bankname}}</span>
								<span class="jiu-font24-555"
									style="color: #A972FF;margin-top: 1.07vw;">{{ item.acctType == 'debit' ? '借记卡' : '信用卡' }}</span>
							</div>
							<span class="select-btn" @tap="selectCard(item)">选择</span>
						</div>
						<div class="dashed"></div>
						<span class="card-num">{{ item.acctno }}</span>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div class="card-box">
					<span class="add-card" @tap="addCard">添加银行卡</span>
				</div>
			</div>
		</ma-body>
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
		<product-modal ref="productModal"></product-modal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	export default {
		components: {
			productModal
		},
		data() {
			return {
				cardNum: '',
				cardList: [],
				orderId: '',
				cancelModal: false,
				content: '确定购买该数字藏品吗？',
				signingId: '',
				productInfo: {},
				oldInfo: {}
			}
		},
		methods: {
			onBack() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			async getPaySigningList() {
				let res = await this.$u.api.getPaySigningList();
				this.cardList = res;
			},
			addCard() {
				this.$ma.route.buyInput()
			},
			selectCard(item) {
				this.cancelModal = true;
				this.signingId = item.signingId;
				// this.$ma.route.buyDetail({
				// 	orderId: this.orderId,
				// 	productInfo: this.productInfo,
				// 	signingId: item.signingId
				// })
			},
			async buy() {
				console.log(this.productInfo)
				let data = {
					amount: this.productInfo.spuPrice,
					moduleName: 'product',
					signingId: this.signingId,
					orderId: this.orderId
				};
				uni.showLoading({
					title: '支付中请稍后',
					mask: true
				})
				this.$u.api.onQuickPay(data).then(async res=>{
					setTimeout(()=>{
						this.getPayInfoStatus();
					},1000)
				})

			},
			async getPayInfoStatus() {
				let id = this.orderId;
				this.$u.api.getPayInfoStatus({}, id).then(res => {
					if (res == 'success') {
						uni.hideLoading();
						let info = {
							cover: this.productInfo.cover,
							spuTitle: this.productInfo.spuTitle,
							tags: this.productInfo.tags
						}
						let obj = {
							info
						};
						setTimeout(() => {
							this.$refs.productModal.open({
								obj,
								success: async () => {
									let id;
									if (this.productInfo.type == 'collection') id = 0;
									else id = 1;
									uni.showToast({
										icon: 'none',
										title: '跳转中，请稍后'
									})
									setTimeout(() => {
										this.$ma.route.myCollection({
											currentIndex: id
										})
									}, 4000)
								}
							});
						}, 1000)
					} else if (res == 'ing') {
						uni.showLoading({
							title: '支付中请稍后',
							mask: true
						})
						setTimeout(() => {
							uni.showLoading({
								title: '支付中请稍后',
								mask: true
							})
							this.getPayInfoStatus();
						}, 3000)
					} else if (res == 'fail') {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: err.msg
					})
				})

			}
		},
		onLoad(e) {
			this.getPaySigningList();
			// this.productInfo = JSON.parse(e.productInfo);
			this.orderId = e.orderId;
			this.productInfo = JSON.parse(e.productInfo);
			console.log(this.productInfo)
		},
		destroyed() {
			clearTimeout();
		}
	}
</script>

<style lang="scss">
	.backImg {
		z-index: 3;
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		padding: 0 4.27vw;
		margin-top: 6.4vw;

		.card-item {
			display: flex;
			flex-direction: column;
			padding: 6.4vw;
			padding-bottom: 4vw;
			border-radius: 4.27vw;
			background-color: #1B1B1B;

			.card-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.select-btn {
				width: 17.07vw;
				line-height: 8.53vw;
				text-align: center;
				border-radius: 5.33vw;
				background-color: #A972FF;
				box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.48);
				font-size: 3.2vw;
				font-weight: 500;
				color: #000;
			}

			.dashed {
				border-top: 1px dashed #000;
				margin-top: 6.4vw;
			}

			.card-num {
				margin-top: 4.27vw;
				font-weight: 300;
				color: #555;
				font-size: 3.73vw;
			}
		}
	}

	.card-box {
		padding: 2.13vw 5.33vw;
		background-color: #1B1B1B;

		.add-card {
			display: block;
			width: 100%;
			line-height: 12.8vw;
			border-radius: 6.4vw;
			background: #A972FF;
			box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
			text-align: center;
			font-size: 3.73vw;
			font-weight: 500;
			color: #000;
		}
	}
</style>
